<!-- 一个侧边导航栏、主要内容区域和页脚，其中主要内容区域使用Element UI的滚动区域组件来实现滚动效果 -->

<template>
    <div class="app_container">
        <navigation/>
        <div class="main-container">
            <el-scrollbar style="height: 100%">
                <div class="main-wrap">
                <router-view/>
                </div>
            </el-scrollbar>
           
        </div>
    </div>
</template>
<script>
import Navigation from '@/components/Navigation.vue'

export default {
  components: {
    Navigation
  }
}
</script>
<style lang="scss">
.app_container{
    .main-container{
    margin-top: 60px;
    background-image: url('../assets/img/concrete-texture.png');
    .el-scrollbar .el-scrollbar__wrap{
      overflow-x: hidden;
    }
    .main-wrap{
      margin: 0 auto;
      min-height: calc(100vh - 160px);
    }
  }
}
</style>